<script>
var ProgressBar = {
  name: 'ProgressBar',
  template: '<div class="progress-bar" :style="{height: height, backgroundColor: backgroundColor}">' +
      '    <div class="progress" :style="{backgroundColor: color}" ref="progress"></div>' +
      '  </div>',
  props: {
    percentage: {
      type: Number,
      default: function () {
        return 0
      },
      validate: function (value) {
        if (value > 100 || value < 0) {
          throw new Error('进度条只能显示0%到100%之间的进度')
        }
        return value <= 100 && value >= 0
      }
    },
    height: {
      type: String,
      default: function () {
        return '5px'
      }
    },
    backgroundColor: {
      type: String,
      default: function () {
        return 'rgba(66,160,222,0.2)'
      }
    },
    color: {
      type: String,
      default: function () {
        return '#24dcf7'
      }
    }
  },
  watch: {
    percentage: function (newVal, oldVal) {
      this.animateProgress(newVal)
    }
  },
  methods: {
    animateProgress(progress) {
      var self = this
      if (progress) {
        self.$refs.progress.style.width = progress + '%'
      }
    }
  },
  mounted: function () {
    var self = this
    self.animateProgress(self.percentage)
  },
}
export default ProgressBar
</script>

<style scoped>
@import './progress-bar.css';
</style>
